﻿
@page
@model AdminUI.Pages.UserManage.UserModel
@{
    var F = Html.F();
}
@section head {

    <style>
        .f-grid-cell.f-grid-cell-AccessToken .f-grid-cell-inner {
            white-space: normal;
            word-break: break-all;
        }

        .f-grid-cell.f-grid-cell-OpenID .f-grid-cell-inner {
            white-space: normal;
            word-break: break-all;
        }

        /* jQueryHover  Begin */
        .container-item {
            float: left;
        }

            .container-item img {
                height: 200px;
            }

        h1 {
            padding-bottom: 10px;
            color: darkmagenta;
            font-weight: bolder;
        }

        img {
            cursor: pointer;
        }

        #pic {
            position: fixed;
            display: none;
        }

        #pic1 {
            width: 400px;
            height: auto;
            border-radius: 5px;
            -webkit-box-shadow: 5px 5px 5px 5px hsla(0,0%,5%,1.00);
            box-shadow: 5px 5px 5px 0px hsla(0,0%,5%,0.3);
        }
        /* jQueryHover  End */
    </style>

}
@section body {
    <f:Panel ID="Panel1" BodyPadding="5" ShowBorder="false" Layout="VBox" ShowHeader="false" IsViewPort="true">
        <Items>
            <f:Grid ID="Grid1" BoxFlex="1" ShowBorder="true" ShowHeader="false" EnableTextSelection="true" EnableColumnLines="true" EnableMultiSelect="false" AllowSorting="true" AllowPaging="true" IsDatabasePaging="true"
                    DataIDField="UserID" DataTextField="VillageName" SortField="UserID" SortDirection="DESC" PageSize="@ViewBag.PageSize" RecordCount="@ViewBag.Total" DataSource="@ViewBag.DataSource"
                OnSort="@Url.Handler("Grid_DoAction")" OnSortFields="Panel1" OnPageIndexChanged="@Url.Handler("Grid_DoAction")" OnPageIndexChangedFields="Panel1" AllowColumnLocking="false" FixedRowHeight="false" RowHeight="48">
                <Toolbars>
                    <f:Toolbar ID="Toolbar1" ToolbarAlign="Right" ItemSpace="1">
                        <Items>
                            <f:Button ID="btnAdd" IconAlign="Left" EnableDefaultState="false" IconFont="_Plus" Text="新增" OnClientClick="onAddClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnEdit" IconAlign="Left" EnableDefaultState="false" IconFont="_Edit" Text="编辑" OnClientClick="onEditClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnDelete" IconAlign="Left" EnableDefaultState="false" IconFont="TrashO" Text="删除" OnClientClick="onDeleteClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnDetails" IconAlign="Left" EnableDefaultState="false" IconFont="_List" Text="详情" OnClientClick="onDetailsClick();"></f:Button>
                            <f:ToolbarSeparator></f:ToolbarSeparator>
                            <f:Button ID="btnRefresh" IconAlign="Left" EnableDefaultState="false" IconFont="_Refresh" Text="刷新" OnClientClick="onRefreshClick();"></f:Button>
                            <f:ToolbarFill ID="ToolbarFill1"></f:ToolbarFill>
                            <f:DropDownList ID="ddlCondition" SelectedValue="" Width="150">
                                <f:ListItem Text="== 请选择条件 ==" Value="" />
                                <f:ListItem Text="用户ID" Value="UserID" />
                                <f:ListItem Text="手机号" Value="Mobile" />
                                <f:ListItem Text="姓名" Value="TrueName" />
                            </f:DropDownList>
                            <f:TriggerBox ID="ttbSearch" ShowLabel="false" EmptyText="请输入搜索关键字" TriggerIcon="Search" OnTriggerClick="@Url.Handler("Grid_DoAction")" OnTriggerClickFields="Panel1"
                                          OnTriggerClickParameter1="@(new Parameter("actionType", "search", ParameterMode.String))"
                                          OnTriggerClickParameter2="@(new Parameter("keyword", "F.ui.ttbSearch.getValue()"))"
                                          OnTriggerClickParameter3="@(new Parameter("condition", "F.ui.ddlCondition.getValue()"))">
                            </f:TriggerBox>
                        </Items>
                    </f:Toolbar>
                </Toolbars>
                <Columns>
                    @*<f:RowNumberField HeaderText="#" TextAlign="Center" />*@
                    <f:RenderField HeaderText="会员用户ID" DataField="UserID" FieldType="Int" QuickSortField="true" Width="120"  TextAlign="Center" />
                    <f:RenderField HeaderText="登录手机号" DataField="Mobile" Width="120" TextAlign="Center" />
                    <f:RenderField HeaderText="姓名" DataField="TrueName" Width="90" />
                    <f:RenderField HeaderText="性别" DataField="Sex" Width="60" TextAlign="Center" />
                    @* <f:RenderField HeaderText="头像" DataField="AvatarUrl" RendererFunction="renderImage" Width="60" TextAlign="Center" /> *@
                    <f:RenderField HeaderText="类型" DataField="UserType" Width="60" TextAlign="Center" />
                    <f:RenderField HeaderText="客户名称" DataField="CustomerName" Width="160" />

                    <f:RenderField HeaderText="角色" DataField="Role" FieldType="Int" Width="60" TextAlign="Center" RendererFunction="renderRole" />
                    <f:RenderField HeaderText="推荐人" DataField="RecoID" FieldType="Int" Width="180" RendererFunction="renderReco" />
                    <f:RenderField HeaderText="推荐人姓名" DataField="RecoName" Width="100" Hidden="true"/>
                    <f:RenderField HeaderText="推荐人ID2" DataField="RecoID2" FieldType="Int" Width="80" Hidden="true" />
                    <f:RenderField HeaderText="推荐人姓名2" DataField="RecoName2" Width="100" Hidden="true" />
                    <f:RenderCheckField HeaderText="代理" DataField="IsAgent" RenderAsStaticField="true" Width="60" TextAlign="Center" />
                    <f:RenderField HeaderText="代理区域ID" DataField="AgentAreaID" FieldType="Int" Width="80" TextAlign="Right" Hidden="true" />
                    <f:RenderField HeaderText="省份ID" DataField="ProvinceID" FieldType="Int" Width="80" Hidden="true" />
                    <f:RenderField HeaderText="所属地区" DataField="ProvinceName" Width="150" RendererFunction="renderArea" />
                    <f:RenderField HeaderText="城市ID" DataField="CityID" FieldType="Int" Width="80" Hidden="true" />
                    <f:RenderField HeaderText="城市" DataField="CityName" Width="100" Hidden="true" />
                    <f:RenderField HeaderText="区县ID" DataField="CountyID" FieldType="Int" Width="80" Hidden="true" />
                    <f:RenderField HeaderText="区县" DataField="CountyName" Width="100" Hidden="true" />
                    <f:RenderField HeaderText="收货人电话" DataField="ReceiverPhone" Width="100" Hidden="true" />
                    <f:RenderField HeaderText="收货人姓名" DataField="ReceiverName" Width="100" Hidden="true" />
                    <f:RenderField HeaderText="收货地址" DataField="ReceiveAddress" Width="100" Hidden="true" />
                    <f:RenderField HeaderText="余额" DataField="Balance" FieldType="Double" Width="80" TextAlign="Right" />
                    <f:RenderField HeaderText="结算银行" DataField="ClearingBank" Width="100" Hidden="true" />
                    <f:RenderField HeaderText="开户名称" DataField="BankAccountName" Width="100" Hidden="true" />
                    <f:RenderField HeaderText="银行卡号" DataField="BankCardNo" Width="100" Hidden="true" />
                    <f:RenderField HeaderText="累计奖金" DataField="TotalBonus" FieldType="Double" Width="80" TextAlign="Right" Hidden="true" />
                    <f:RenderField HeaderText="推荐人数" DataField="RecommendTotal" FieldType="Int" Width="80" TextAlign="Right" Hidden="true" />
                    @* <f:RenderField HeaderText="状态" DataField="Status" FieldType="Int" Width="80" TextAlign="Right" /> *@
                    <f:RenderField HeaderText="加入时间" DataField="RegTime" FieldType="Date" Renderer="Date" RendererArgument="yyyy-MM-dd HH:mm" Width="140" TextAlign="Center" />

                   @*  <f:RenderField HeaderText="上次登录" DataField="LastLoginTime" FieldType="Date" Renderer="Date" RendererArgument="yyyy-MM-dd HH:mm" Width="150" TextAlign="Center" />
                    <f:RenderField HeaderText="已登录" DataField="LoginCount" FieldType="Int" Width="80" TextAlign="Right" /> *@
                    @*<f:RenderField HeaderText="访问令牌" DataField="AccessToken" MinWidth="200" ShowToolTip="true" EnableHeaderMenu="false" />*@
                    <f:RenderField HeaderText="备注" DataField="Memo" MinWidth="100" ExpandUnusedSpace="true" />
                </Columns>
                <PageItems>
                    <f:ToolbarSeparator></f:ToolbarSeparator>
                    <f:ToolbarText Text="每页记录数："></f:ToolbarText>
                    <f:DropDownList ID="ddlGridPageSize" Width="60" SelectedValue="@ViewBag.PageSize" OnSelectedIndexChanged="@Url.Handler("Grid_DoAction")" OnSelectedIndexChangedParameter1="@(new Parameter("actionType","changePageSize",ParameterMode.String))" OnSelectedIndexChangedFields="Panel1">
                        <Items>
                            <f:ListItem Text="10" Value="10"></f:ListItem>
                            <f:ListItem Text="20" Value="20"></f:ListItem>
                            <f:ListItem Text="30" Value="30"></f:ListItem>
                            <f:ListItem Text="50" Value="50"></f:ListItem>
                            <f:ListItem Text="100" Value="100"></f:ListItem>
                            <f:ListItem Text="200" Value="200"></f:ListItem>
                        </Items>
                    </f:DropDownList>
                </PageItems>
            </f:Grid>
        </Items>
    </f:Panel>

    <f:Window ID="Window1" IsModal="true" Hidden="true" Target="Top" EnableResize="true" EnableMaximize="true" EnableIFrame="true" Width="750" Height="700">
        @*<Listeners>
                <f:Listener Event="close" Handler="onWindowClose('refresh');"></f:Listener>
            </Listeners>*@
    </f:Window>
}

@section script {
    <script src="~/res/js/grid.js"></script>
    <script>
        function onAddClick(event) {
            var path = "/UserManage/UserAdd";
            F.ui.Window1.show(path, '新增会员');
        }

        function onEditClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要修改的记录！');
                return;
            }

            var selectedRow = grid1.getSelectedRow();
            var path = "/UserManage/UserEdit?id=" + selectedRow;
            F.ui.Window1.show(path, '编辑会员');
        }

        function onDeleteClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要删除的记录！');
                return;
            }

            var selectedRows = grid1.getSelectedRows();
            F.confirm({
                message: '确定要删除所选记录吗？',
                target: '_top',
                ok: function () {
                    F.doPostBack('@Url.Handler("Grid_DoAction")', 'Panel1', {
                        actionType: 'delete',
                        selectedIDs: selectedRows
                    });
                }
            });
        }
        function onDetailsClick(event) {
            var grid1 = F.ui.Grid1;
            if (!grid1.hasSelection()) {
                showNotify('请选择要查看的记录！');
                return;
            }

            var selectedRow = grid1.getSelectedRow();
            var path = "/UserManage/UserDetails?id=" + selectedRow;
            F.ui.Window1.show(path, '查看用户详情');
        }

        function onRefreshClick() {
            var grid1 = F.ui.Grid1;
            var selectedRows = grid1.getSelectedRows();
            F.doPostBack('@Url.Handler("Grid_DoAction")', 'Panel1', {
                actionType: 'refresh',
                selectedIDs: selectedRows
            });
        }

        function renderRole(value, params) {
            switch (value) {
                case 1:
                    return "<span class='tag-c1'>财务</span>";
                case 2:
                    return "<span class='tag-c3'>仓库</span>";
                case 9:
                    return "<span class='tag-error'>管理</span>";
                default:
                    return "<span class='tag-default'>会员</span>";
            }
        }

        function renderReco(value, params) {
            var reco = "";
            if (value > 0) {
                // reco = params.rowData.values.RecoID + "-" + params.rowData.values.RecoName;
                reco = params.rowData.values.RecoName;

                var id2 = params.rowData.values.RecoID2;
                if (id2 > 0) {
                    // reco += "=>" + params.rowData.values.RecoID2 + "-" + params.rowData.values.RecoName2;
                    reco += "=>" + params.rowData.values.RecoName2;
                }
            }

            return reco;
        }

        function renderReceiver(value, params) {
            var s = params.rowData.values.ReceiverName + "-" + params.rowData.values.ReceiverMobile + "-" + params.rowData.values.ReceivingAddress;
            return s;
        }

        function renderArea(value, params) {
            var s = params.rowData.values.CityName + " " + params.rowData.values.CountyName;
            return s;
        }

        //图片预览
        function renderImage(value, params) {
            //return '<a href="javascript:;" class="imagePreview">预览</a>'; //文字链接
            //return '<a href="javascript:;" title="预览图片" class="imagePreview"><i class="f-icon f-icon-image f-grid-cell-iconfont"></i></a>';//图片字体按钮
            return '<div class="container-item" ><img style="width:40px;height:32px;margin:0,auto;" src="' + value + '" bigUrl="' + value + '"/></div>';
        }

        F.ready(function () {
            //var grid = F.ui.Grid1;

            ////注册图片预览单击事件
            //grid.el.on('click', 'a.imagePreview', function (event) {
            //    var rowEl = $(this).closest('.f-grid-row');
            //    var rowData = grid.getRowData(rowEl);

            //    var path = "/Dialog/ImagePreview?url=" + rowData.values.ImageUrl;
            //    F.ui.Window1.show(path, '图片预览', 800, 800);
            //});

            //jQueryHover container container-item img 鼠标悬停全屏预览
            $(".container-item img").hover(function () {
                var bigUrl = $(this).attr("bigUrl");
                $(this).parents(".container-item").append("<div id='pic'><img src='" + bigUrl + "' id='pic1'></div>");
                $(".container-item img").mousemove(function (e) {
                    var wH = document.documentElement.clientHeight
                    var wW = document.documentElement.clientWidth
                    var imgW = $("#pic1").width()
                    var imgH = $("#pic1").height()
                    var cssArr = { "top": "", "left": "", "bottom": "", "right": "" }

                    if (e.clientX + imgW > wW) {
                        if (wW - e.clientX < imgW) {
                            cssArr.left = (e.clientX - imgW - 10) + "px";;

                        } else {
                            cssArr.right = 0;
                        }

                    } else {
                        cssArr.left = (e.clientX + 10) + "px";
                    }

                    if (e.clientY + imgH > wH) {
                        cssArr.bottom = 0;
                    } else {
                        cssArr.top = (e.clientY + 10) + "px";
                    }
                    //console.log($("#pic1").height(), wH)
                    //console.log(cssArr)
                    $("#pic").css(cssArr).fadeIn("fast");
                });
            }, function () {
                $("#pic").remove();
            });
        });

    </script>
}